<template>
  <div>
    <button
      class="container"
      :class="[`type-${type}`, `size-${size}`]"
      :style="{ width: width }"
      @click="onClickListener"
    >
      <slot></slot>
      <i :class="`iconfont ${icon}`" v-show="showIcon"></i>
    </button>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "default",
    },
    width: {
      default: "",
    },
    icon:{
      type:String,
      default:"icon-sousuo"
    },
    showIcon:{
      type:Boolean,
      default:false
    }
  },
  methods: {
    onClickListener() {
      this.$emit(click);
    },
  },
};
</script>
<style scoped>
.container {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  margin-right: 5px;
  border: 0px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.type-default {
  background: #409eff;
}
.type-danger {
  background: #f56c6c;
}
.type-success {
  background: #67c23a;
}
.type-default:hover,
.type-danger:hover,
.type-success:hover{
  opacity: 0.7;
}
.size-default {
  padding: 3px 10px;
  font-size: 18px;
}
.size-danger {
  padding: 6px 12px;
  font-size: 10px;
}
.size-success {
  padding: 10px 10px;
  font-size: 25px;
}
</style>